<!-- 首页 - 个人学习 -->

<template>
	<view>
		<focus-body 
			mode="auto" 
			bg="#F7F7F7"
		>
			<view :style="{background:current === 0 ? '#4A87FD':current === 1 ? '#00ca9a' :'#FA8643'}">
				<view style="background-color: #F7F7F7;">
					<view style="width: 78%;">
						<u-tabs
							:list="tabList"
							:current="current"
							:inactiveStyle="{
								color: '#000'
							}"
							:activeStyle="{
								color: '#4A87FD'
							}"
							:scrollable="false"
							@change="change"
							bg-color="#F7F7F7"
						/>
					</view>
				</view>
			</view>
			<view v-show="current === 0">
				<taskScore 
					:bool='refresh'
					:person="shortData.sentry_pid" 
					@finished="onFinishedCall"
				/>
				<!-- 首页课程详情卡片 -->
				<view class="details-card">
					<view class="course-details-card">
						<view>
							<view>
								<view class="titleNum"> {{addCourse.this_month_course_num}} </view>
								<view class="title"> 本月新增 </view>
							</view>
						</view>
						<view>
							<view>
								<view class="titleNum"> {{addCourse.total_course_num}} </view>
								<view class="title"> 共计课程 </view>
							</view>
						</view>
						<view>
							<view>
								<view class="titleNum"> {{addCourse.total_chapter_num}}</view>
								<view class="title"> 共计章节 </view>
							</view>
						</view>
						<view>
							<view>
								<view class="titleNum"> {{addCourse.total_duration}}</view>
								<view class="title"> 共计分钟 </view>
							</view>
						</view>
					</view>
				</view>
				<!-- 首页banenr -->
				<focus-box
					width="750"
					height="24"
				/>
				<thing-todo
					:random="randomStr"
					:person="shortData.sentry_pid"
					@finished="onFinishedCall"
					:showType='1'
				/>
				<!-- 主页课程列表 组件 -->
				<home-course-list
					:bool="refresh"
				/>
			</view>
			<view v-show="current === 1">
			<certificatePage
				:sentryPid='sentryPid'
				:bool="refresh"
				@pullDownRefresh='pullDownRefresh'
			/>
		</view>
		
		<view v-show="current === 2 ">
			<taskScoreEnter 
				:enterId='enterId'
				:bool='refresh'
				:type='2'
			/>
			<!-- @logintouch="onLogintouch" -->
			<!-- 首页课程详情卡片 -->
			<view class="details-card">
				<view class="course-details-card">
					<view>
						<view>
							<view class="titleNum"> {{addCourse.this_month_course_num}} </view>
							<view class="title"> 本月新增 </view>
						</view>
					</view>
					<view>
						<view>
							<view class="titleNum"> {{addCourse.total_course_num}} </view>
							<view class="title"> 共计课程 </view>
						</view>
					</view>
					<view>
						<view>
							<view class="titleNum"> {{addCourse.total_chapter_num}}</view>
							<view class="title"> 共计章节 </view>
						</view>
					</view>
					<view>
						<view>
							<view class="titleNum"> {{addCourse.total_duration}}</view>
							<view class="title"> 共计分钟 </view>
						</view>
					</view>
				</view>
			</view>
			<!-- 首页banenr -->
			<lastStudy 
				:bool='refresh' 
				:enterId ='enterId' 
			/>
			<focus-box
				width="750"
				height="24"
			/>
			<!-- 主页课程列表 组件 -->
			<home-course-list 
				:item_type = '2'
				:enterId ='enterId'
				:bool="refresh"
			/>
		</view>
		</focus-body>
	</view>
</template>

<script>
	// 接口文件引入
	import request from '@/common/js/request/userInfo.js';
	import allRequest from '@/common/js/request/allRequest.js';
	// 通用方法引入
	import project from '@/common/js/public/project.js';
	// 组件引入
	import taskScore from './element/task-score/task-score.vue'; // 学分任务
	import lastStudy from './element/lastStudy/lastStudy.vue'; // 代办学习
	import taskScoreEnter from './element/task-score-enter/task-score-enter.vue'; // 学分任务
	import homeCourseList from './element/homeCourseList/home-course-list.vue'
	import certificatePage from './element/certificatePage/index.vue'
	import thingTodo from './element/thing-todo/thing-todo.vue'; // 待办事项
	export default {
		// 组件定义
		components: {
			taskScore,
			homeCourseList,
			certificatePage,
			thingTodo,
			taskScoreEnter,
			lastStudy,
		},
		// 页面事件
		data() {
			return {
				// 登录信息
				login: {
					code: '', // 微信登录code
					encryptedData: '', // 加密信息串
					iv: '', // 加密向量
				},
				refresh:false,//刷新数据开关
				tabList: [ ],
				current: 0,
				//更换身份弹出框身份变化信息
				sentry_pid_name: "",
				// 计时器对象
				timer: {
					modalLoginCall: null, // 等待登录模态框回调信息
					autoStopRef: null, // 延时关闭下拉刷新特效
				},
				// 临时缓存
				shortData: {
					/* id: 24146, // 用户id
					sentry_pid: 2, // 身份标识：1-管理人员  2-作业人员  3-监督人员*/
				},
				// 状态信息
				state: {
					isFirst: true, // 是否为第一次打开
					isLoadCenter: false, // 是否加载屏幕中央广告图
				},
				// 随机字符串
				randomStr: null,
				// 各组件请求执行情况
				compReq: {
					task: false, // 学分统计组件
					course: false, // 课程列表组件
				},
				//是否为第一次变更
				openPopup: false,
				//本月新增课程信息
				addCourse: {
					this_month_course_num: 0,
					total_course_num: 0,
					total_chapter_num: 0,
					total_duration: 0,
					userInfo: {}
				},
				addCourseEnter:{
					this_month_course_num: 0,
					total_course_num: 0,
					total_chapter_num: 0,
					total_duration: 0,
				},
				userInfo:false,
				// tabVisible: undefined,
				certificate:false,
				history:[], //历史证书列表
				certificateList:[] ,//证书列表,
				sentryPid:undefined,//身份id
				statusBarHeight:20,
				enterId:0
			}
		},
		// 页面加载完成
		onLoad(options) {
			//是否有入场学习权限
			uni.getSystemInfo({
				success: (sysD) => {
					// 状态栏的高度 赋值
					this.statusBarHeight = sysD.statusBarHeight;
				}
			});
		},
		// 页面显示
		onShow() {
			const authCode = uni.getStorageSync('authCode');
			if(!authCode){
				uni.showModal({
					title: '登录',
					cancelText:'暂不登录',
					confirmText:"立即登录",
					confirmColor:"#F0AD4E",
					content: '请先登录',
					success: (btn_res) => {
						if (btn_res.confirm) {
							// 跳转登录
							uni.navigateTo({
								url: "/pages/login/index"
							})
						} else if (btn_res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					}
				})
			} else {
				const local = uni.$focus.varForever('get');
				const short = uni.$focus.varShortTime('get');
				const { token } = short;
				if(token && local) {
					this.initPage();
				} else {
					request.authCodeGetUserInfo({
						data: {
							encryptedData: authCode
						},
						success: (res) => {
							this.initPage();
						}
					})
				}
			}
		},
		// 页面下拉刷新
		onPullDownRefresh() {
			this.refresh = !this.refresh
			var short = uni.$focus.varForever('get');
			if (short) { this.shortData = short}
			const { token } = short;
			this.getRuleNotice();
			// this.getRuleNoticeEnter();
			this.randomStr = uni.$focus.strRandom(6);
			// 初始化各组件请求执行情况
			this.compReq.task = false;
			this.compReq.course = false;

		},
		onShareAppMessage() { },
		methods: {
			initPage() {
				allRequest.getEnterScore({
					success:(res) => {
						if(res.bool){
							this.enterId = res.data.ag_project_id
							this.tabList = [{ name: '安全教育培训' }, { name: '继续教育学习' }, { name:'入场学习' }]
						}else{
							this.tabList = [{ name: '安全教育培训' }, { name: '继续教育学习' }]
							if(this.current == 2){
								this.current == 0
							}
						}
						this.tabSecond()
					},
				})
				// var userInfo = uni.$focus.varForever('get').token;
				request.userInfoGet({
					success: (res) => {
						this.refresh = !this.refresh;
					}
				})
				
				const short = uni.$focus.varForever('get');
				this.userInfo = short ? true : false
				
				this.shortData = short;
				this.randomStr = uni.$focus.strRandom(6);
				// const { token } = short;
				this.getRuleNotice();
				// this.getRuleNoticeEnter()
			},
			tabSecond(){
				const tab = uni.getStorageSync('tab') + "";//这里传过来的tab可能是0  转为字符串
				if(tab){
					this.current = tab - 0;//转为Number
					uni.removeStorageSync('tab');
				}
			},
			isLogin(){
				this.userInfo = true
			},
			/**
			 * @description 
			 */
			getRuleNotice() {
				request.getRuleNotice({
					success: res => {
						uni.stopPullDownRefresh();
						this.addCourse = res
					}
				})
			},
			/**
			 * @description 
			 */
			// getRuleNoticeEnter() {
			// 	request.getRuleNotice({
			// 		data:{is_all:1},
			// 		success: res => {
			// 			uni.stopPullDownRefresh();
			// 			this.addCourseEnter = res
			// 		},
			// 		fail:(err)=>{
			// 		}
			// 	})
			// },
			// 学分任务等组件 数据请求执行结束回调
			onFinishedCall(objD) {
				// --------------------- 修改组件请求执行情况
				// 学分统计组件
				if (objD.tag == 'task-score') {
					this.compReq.task = true;
				}
				// 课程列表组件
				else if (objD.tag == 'list-course') {
					this.compReq.course = true;
				}
				// --------------------- 请求完成后，延时关闭刷新特效
				if (this.compReq.task && this.compReq.course) {
					// 清除定时器
					if (this.timer.autoStopRef) {
						clearTimeout(this.timer.autoStopRef);
					}
					// 延时定时器
					this.timer.autoStopRef = setTimeout(() => {
						// 关闭下拉刷新特效
						uni.stopPullDownRefresh();
					}, 1000);
				}
			},
			//tabs的切换
			change(e){
				const { index } = e;
				if(index==1){
					this.certificate = true
				}else{
					this.certificate = false
				}
				this.current = index
			},
		}

	}
</script>

<style>
	.ticketKard {
		width: 710rpx;
		display: flex;
		justify-content: space-evenly;
		border: 2rpx solid #4A87FD;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.liveKard {
		margin-bottom: 30rpx;
		background-color: #F7F7F7;
	}

	.kardLeft {
		width: 500rpx;
		height: 180rpx;
	}

	.liveLeftTitle {
		font-size: 34rpx;
		font-weight: bold;
		color: #000;
	}

	.liveLeftTitleLeft {
		display: inline-block;
		margin-right: 16rpx;
		width: 6rpx;
		height: 28rpx;
		background-color: #4A87FD;
	}

	.liveLeftTitleLeftWork {
		display: inline-block;
		margin-right: 16rpx;
		width: 6rpx;
		height: 28rpx;
		background-color: #fc8341;
	}

	.kardText {
		display: flex;
	}

	.kardEntry {
		width: 200rpx;
		height: 180rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kardHot {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		text-align: center;
		background-color: #fe1e0e;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFF;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.kardDetails {
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.kardDepict {
		height: 40rpx;
		margin: 40rpx 0 0 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #646464;
		line-height: 40rpx;
	}

	.joinTicket {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #4A87FD;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 20rpx;
	}

	.popupBox {
		text-align: center;
	}

	.popupTitle {
		height: 48rpx;
		padding-top: 20rpx;
		margin-bottom: 40rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
	}

	.popupDetails {
		width: 400rpx;
		margin-left: 28rpx;
	}

	/* .popupClickBtn {
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 125rpx;
		margin-top: 20rpx;
		color: #4A87FD;
	} */

	.liveEntry {
		display: flex;
		width: 686rpx;
		height: 160rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 218, 219, 1) 100%);
		border-radius: 12rpx;
		margin-left: 32rpx;
		justify-content: space-evenly;
		align-items: center;
	}

	.liveKardTitle {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		margin-bottom: 26rpx;
	}

	.liveKardImg {
		width: 88rpx;
		height: 88rpx;
		/* background-color: #ccc; */
		/* background-image: '/pages/static/img/live/live2x.png'; */
		/* z-index: 9; */
	}

	.liveDetails {
		width: 480rpx;
		height: 160rpx;
	}

	.liveEnd {
		width: 480rpx;
		height: 160rpx;
		line-height: 160rpx;
		text-align: center;
		font-size: 32rpx;
		color: #4A87FD;
	}

	.liveTitle {
		width: 360rpx;
		height: 42rpx;
		margin-top: 30rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 700;
		text-align: left;
		color: rgba(0, 0, 0, 0.85);
	}

	.liveFooter {
		width: 500rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.liveState {
		display: flex;
		line-height: 30rpx;
		margin: 18rpx 0 0rpx 0;
	}

	.liveClickBtn {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		opacity: 1;
		background: #FF4D4F;
		border-radius: 70rpx;
		font-family: -400;
		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.tong-gao {
		width: 750rpx;
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		background-color: #d6ecff;
		font-size: 27rpx;
		color: #4A87FD;
	}

	.details-card {
		width: 750rpx;
		height: 20rpx;
		position: relative;
	}

	.course-details-card {
		position: absolute;
		left: 0;
		top: -147rpx;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 702rpx;
		height: 170rpx;
		z-index: 20;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 18rpx;
		background-color: #fff;
	}

	.titleNum {
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		color: #262626;
		margin-bottom: 10rpx;
	}

	.title {
		width: 88rpx;
		height: 30rpx;
		text-align: center;
		font-size: 22rpx;
		font-weight: 400;
		color: #7f7f7f;
		line-height: 30rpx;
	}
</style>
